<template>
	<div class="system-dept-container">
		<div ref="tableRef">
			<el-card shadow="hover">
				<div class="system-dept-search mb15">
			<el-form :inline="true">
			  <el-form-item label="会员名" v-if="tableData.param.member_id<=0">
				<el-input size="default" v-model="tableData.param.member_name" placeholder="请输入会员名称" class="w-50 m-2" clearable/>
			  </el-form-item>
			  <el-form-item label="类型">
				<el-select size="default" placeholder="请选择类型" class="w-50 m-2" v-model="tableData.param.type_data" clearable>
				  <el-option label="充值"  value="1" />
				  <el-option label="消费"  value="2" />
				</el-select>
			  </el-form-item>
			  <el-form-item label="记录时间">
				<el-date-picker
				v-model="time_value"
				type="datetimerange"
				range-separator="至"
				start-placeholder="开始时间"
				end-placeholder="结束时间"
				value-format="YYYY-MM-DD HH:mm:ss"
			  />
				</el-form-item>
	 
					  <el-form-item>
				<el-button size="default" type="primary" class="ml10" @click="initList">
				  <el-icon>
					<ele-Search />
				  </el-icon>
				  查询
				</el-button>
			   
			  </el-form-item>
			</el-form>
		  </div>
				<el-table
					:data="tableData.data"
					style="width: 100%"
					row-key="id"
					default-expand-all
					:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
				>
					<el-table-column prop="member.name" label="会员名" show-overflow-tooltip> </el-table-column>
					<el-table-column prop="money" label="金额" show-overflow-tooltip>
						<template #default="scope">
							<el-text type="success" v-if="scope.row.money>=0">{{scope.row.money}}</el-text>
							<el-text type="danger" v-else>{{scope.row.money}}</el-text>
						</template>
					</el-table-column>
					<el-table-column prop="recharge_time" label="操作时间" show-overflow-tooltip> </el-table-column>
					<el-table-column  label="类型" show-overflow-tooltip>
						<template #default="scope">
							<el-tag type="success" v-if="scope.row.type_data===1">充值</el-tag>
							<el-tag type="info" v-else>消费</el-tag>
						</template>
					</el-table-column>
					<el-table-column prop="order.order_num" label="订单号" show-overflow-tooltip> </el-table-column>

					<el-table-column prop="remark" label="备注" show-overflow-tooltip> </el-table-column>
	
			
				</el-table>
			</el-card>
			<pagination
			  v-show="tableData.total>0"
			  :total="tableData.total"
			  v-model:page="tableData.param.pageNum"
			  v-model:limit="tableData.param.pageSize"
			  @pagination="initList"
		  />
		</div>
		
	</div>
</template>

<script lang="ts">
import { ref, toRefs, reactive, onMounted, defineComponent,getCurrentInstance, onActivated } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import {getMoneyLogMemberList} from "/@/api/zmm/money_log";
import { table } from 'console';



// 定义接口来定义对象的类型
interface TableDataRow {
  	id:number;
	money: number;
	recharge_time:string;
	type_data:number;
	remark:string;
	member:{
		name:string;
	}
	order:{
		order_num:string;	
	}
	admin:{
		userNickname:string;
	}

	
}
interface TableDataState {
	tableData: {
		data: Array<TableDataRow>;
		loading: boolean;
		total: number;

		param: {
			pageNum: number;
			pageSize: number;
			member_id:number;
			member_name:string;
			type_data:string;
			start_time:string;
			end_time:string;
			
		};
	};
}

export default defineComponent({
	name: 'zmm_money_log_member',
	props:{
    member_id:{
      type:Number,
      default:()=>0
    }
  },
	setup(prop) {
    const {proxy} = getCurrentInstance() as any;
	let time_value = ref('')
	const tableRef = ref<HTMLElement | null>(null);

		const state = reactive<TableDataState>({
			tableData: {
				data: [],
				loading: false,
				total: 0,
				param: {
					pageNum: 1,
					pageSize: 10,
					member_id:0,
					member_name:'',
					type_data:'',
					start_time:'',
					end_time:'',

				},
			},
		});
		// 初始化表格数据
		const initTableData = () => {
			initList();
		};
    const initList = ()=>{
		if(time_value && time_value.value){
			state.tableData.param.start_time = time_value.value[0];
			state.tableData.param.end_time = time_value.value[1];
		}
		getMoneyLogMemberList(state.tableData.param).then((res:any)=>{
        state.tableData.data = res.data.list;
		state.tableData.total = res.data.total;

      });
    };
	onMounted(() => {
		if(prop.member_id){
			state.tableData.param.member_id = prop.member_id;
		}
		initList();
	});
	const changeMemberId = (member_id:number)=>{
		resetParam();
		state.tableData.param.member_id = member_id;
		initList();
	}
	const resetParam = ()=>{
		state.tableData.param = {
					pageNum: 1,
					pageSize: 10,
					member_id:0,
					member_name:'',
					type_data:'',
					start_time:'',
					end_time:'',

				};
	};
		return {
      		initList,
			  changeMemberId,
			  tableRef,
			  time_value,
			...toRefs(state),
		};
	},
});
</script>
